<template>
  <div>
    <el-container>
      <el-main>
<!--        <img src="../../assets/deviceTestJpg/lineStructure.png" height="4952" width="10000"/>-->
        <!--        <img id="imgZone" src="../../assets/deviceTestJpg/test.png" height="896" width="1914" usemap="#device"/>-->
        <img id="imgZone" src="@/assets/deviceTestJpg/lineStructure.png" height="1238" width="2500" usemap="#device"/>
      </el-main>
    </el-container>
    <map name="device">
      <area shape="circle" v-for="data in deviceData" :key="data.id" target="_blank" @click="showChart" >
    </map>
    <el-dialog
      title="提示"
      :visible.sync="chartDialog"
      width="30%"
      center>
      <span>这是一张图</span>
      <div :class="className" :style="{height:height,width:width}" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="chartDialog = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getDevices } from '@/api/device'
import { getLineId } from '@/utils/line'
import data from "../pdf/content";

export default {
  data() {
    return {
      deviceData: [{
        id: 1,
        device: [{
          coordinate: [200, 400, 20],
          id: 1,
          name: 'device1'
       },{
           coordinate: [200, 500, 20],
           id: 2,
           name: 'device2'
       }]
    },{
        id: 2,
        device: [{
            coordinate: [300, 400, 20],
            id: 1,
            name: 'device3'
        },{
            id: 2,
            coordinate: [300, 500, 20],
            name: 'device4'
        }]
    },{
        id: 2,
        device: [{
            coordinate: [400, 400, 20],
            id: 1,
            name: 'device5'
        },{
            id: 2,
            coordinate: [400, 500, 20],
            name: 'device6'
        }]
    },{
        id: 2,
        device: [{
            coordinate: [500, 400, 20],
            id: 1,
            name: 'device7'
        },{
            id: 2,
            coordinate: [500, 500, 20],
            name: 'device8'
        }]
    },{
        id: 2,
        device: [{
            coordinate: [600, 400, 20],
            id: 1,
            name: 'device9'
        },{
            id: 2,
            coordinate: [600, 500, 20],
            name: 'device10'
        }]
    },{
        id: 2,
        device: [{
            coordinate: [700, 400, 20],
            id: 1,
            name: 'device11'
        },{
            id: 2,
            coordinate: [700, 500, 20],
            name: 'device12'
        }]
    },{
        id: 2,
        device: [{
            coordinate: [800, 400, 20],
            id: 1,
            name: 'device13'
        },{
            id: 2,
            coordinate: [800, 500, 20],
            name: 'device14'
        }]
    }],
      testData: [{
        y: '200',
        x: '200',
        name: '王小虎',
        id: '1'
      }, {
        y: '200',
        x: '200',
        name: '王小虎',
        id: '2'
      }, {
        y: '200',
        x: '200',
        name: '王小虎',
        id: '3'
      }, {
        y: '200',
        x: '200',
        name: '王小虎',
        id: '4'
      }],
      chartDialog: false,
      thisDevice: '',
      deviceList: []
    }
  },
  methods: {
    showChart() {
      // this.thisDevice = row.id
      this.chartDialog = true
    },
    drawArea() {
      const map = document.getElementsByName('device')
      const area = map[0].getElementsByTagName('area')
      let k = 0;
      for (let i = 0; i < area.length; i++) {
        // area[i].setAttribute('coords', [200,400,20])
        for (let j = 0; j < this.deviceData[i].device.length;++j) {
          area[k].setAttribute('coords', this.deviceData[i].device[j].coordinate)
          area[k].setAttribute('title', this.deviceData[i].device[j].name)
          ++k
        }
      }
    },
    drawJpg() {
      const canvasZone = document.getElementById('canvasZone')
      const ctx = canvasZone.getContext('2d')
      const img = new Image()
      // const img = document.getElementById('imgZone')
      img.src = '@/assets/deviceTestJpg/deviceTest.jpg'
      img.onload = function() {
        alert('加载完毕')
        ctx.drawImage(img, 0, 0, img.width, img.height)
      }
      // <img src="" height="1080" width="1920"/>
    },
    getDevicesList() {
      getDevices(getLineId()).then(response => {
        this.deviceList = response.data
      })
    }
  },
  mounted() {
    // this.getDevicesList()
    // this.drawJpg()
    this.drawArea()
  }
}
</script>
